<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>用户信息管理</title>
    <meta name="decorator" content="default"/>
    <script src="${ctxStatic}/layer/layer.js"></script>
    <script src="${ctxStatic}/js/widget/stickytableheaders/js/jquery.stickytableheaders.min.js"></script>
    <style>
        .div1{
            width: 160px;
            position:absolute;
            top:7%;
            left: 40%;
            position:fixed;
            z-index: 5;
        }
        .div1 .b1{
            margin-left: 5px;
            margin-bottom: 10px;
        }
        .imgRotate{
            overflow-x:scroll;
            nin-width: 100px;
            height: auto;

        }
    </style>
    <script>
        window.onload = function() {

            var oImg = document.getElementById('img1');

            drag(oImg);

            drag(oDiv);

            function drag(obj) {

                obj.onmousedown = function(ev) {
                    var ev = ev || event;

                    var disX = ev.clientX - this.offsetLeft;
                    var disY = ev.clientY - this.offsetTop;



                    document.onmousemove = function(ev) {
                        var ev = ev || event;

                        obj.style.left = ev.clientX - disX + 'px';
                        obj.style.top = ev.clientY - disY + 'px';
                    }

                    document.onmouseup = function() {
                        document.onmousemove = document.onmouseup = null;

                    }

                    return false;

                }

            }

        }
        function blowup()
        {
            var height = images1.height;
            var width = images1.width;
            if ((height <= height * 2)||(width <= width * 2))
            {
                images1.height = images1.height + 40;
                images1.width = images1.width + 40;
            }
        }
        function reduce()
        {
            if ((images1.width > 100)||(images1.height > 100))
            {
                images1.height = images1.height - 20;
                images1.width = images1.width - 20;
            }
        }
        var v2=0;
        function changeStyle1() {
            v2+=90;
            var obj = document.getElementById("img1");
            obj.style.transform= "rotate("+v2+"deg)";

        }
    </script>
</head>
<body>
    <div class="div1">
        <input type="button" class="b1" value="放大" onclick="blowup()">
        <input type="button" value="缩小" class="b1" onclick="reduce()">
        <input id="input2" type="button" value="旋转" class="b1"  onclick="changeStyle1()" >
    </div>
    <div  style="overflow-x:scroll;">
        <img  name="images1" id="img1" class="imgRotate"  src="${urls}" style="position: absolute;z-index: 3;"/>
    </div>
</body>

</html>
